<template>
  <div>
    <!-- 学生端 -->
    <div id="sidebar">
      <el-menu  :style="'height: 51.3vw;'" background-color="#001529" text-color="#ffffff" default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                :collapse="isCollapse">
        <el-menu-item index="1" >
          <i class="el-icon-menu"></i>
          <span slot="title">报道信息</span>
        </el-menu-item>
        <el-menu-item index="2" >
          <i class="el-icon-s-finance"></i>
          <span slot="title">缴费信息</span>
        </el-menu-item>
        <el-menu-item index="3" >
          <i class="el-icon-school"></i>
          <span slot="title">宿舍选取</span>
        </el-menu-item>
        <el-menu-item index="4" >
          <i class="el-icon-s-custom"></i>
          <span slot="title">我的信息</span>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 管理员端 -->
<!--    <div id="sidebar" v-if="userdetail.role==1">-->
<!--      <el-menu :style="'height: 51.3vw;'" background-color="#001529" text-color="#ffffff" default-active="1-4-1"-->
<!--               class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">-->
<!--        <el-submenu index="1">-->
<!--          <template slot="title">-->
<!--            <i class="el-icon-menu"></i>-->
<!--            <span>系统管理</span>-->
<!--          </template>-->
<!--          <el-menu-item index="1-1" @click="to_manger(1)">-->
<!--            <i class="el-icon-menu"></i>-->
<!--            <span slot="title">报道管理</span>-->
<!--          </el-menu-item>-->
<!--          <el-menu-item index="1-2" @click="to_manger(2)">-->
<!--            <i class="el-icon-s-finance"></i>-->
<!--            <span slot="title">用户管理</span>-->
<!--          </el-menu-item>-->
<!--          <el-menu-item index="1-3" @click="to_manger(3)">-->
<!--            <i class="el-icon-school"></i>-->
<!--            <span slot="title">宿舍管理</span>-->
<!--          </el-menu-item>-->
<!--          <el-menu-item index="4" @click="to_manger(4)">-->
<!--            <i class="el-icon-s-custom"></i>-->
<!--            <span slot="title">学生管理</span>-->
<!--          </el-menu-item>-->
<!--        </el-submenu>-->

<!--        <el-menu-item index="2" @click="to_manger(6)">-->
<!--          <i class="el-icon-s-data"></i>-->
<!--          <span slot="title">数据概况</span>-->
<!--        </el-menu-item>-->

<!--        <el-menu-item index="3" @click="to_manger(7)">-->
<!--          <i class="el-icon-document"></i>-->
<!--          <span slot="title">报道流程</span>-->
<!--        </el-menu-item>-->
<!--      </el-menu>-->
<!--    </div>-->

<!--    <div class="top"  >-->
<!--      <div @click="forIsCollapse" :style="{ 'transform': isCollapse ? 'rotate(180deg)' :'rotate(0deg)'}" style="display:inline-block;transition: 0.5s all;">-->
<!--        <svg style="vertical-align: middle;" t="1667996204371" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"-->
<!--             p-id="12141" width="16" height="16">-->
<!--          <path-->
<!--            d="M850.688 830.72a28.416 28.416 0 0 1-22.016-8.704l-352-315.84a31.552 31.552 0 0 1 0-47.936l352-315.776a32 32 0 0 1 46.208 2.176 31.36 31.36 0 0 1-2.176 45.76l-325.824 291.84 325.824 291.84a31.36 31.36 0 0 1 2.176 45.76 35.52 35.52 0 0 1-24.192 10.88z m-341.248 0a28.416 28.416 0 0 1-22.016-8.704l-352-315.84a31.552 31.552 0 0 1 0-47.936l352-315.776a32 32 0 0 1 46.208 2.176 31.36 31.36 0 0 1-2.176 45.76l-325.824 291.84 325.824 291.84a31.424 31.424 0 0 1 2.176 45.76 35.52 35.52 0 0 1-24.128 10.88z"-->
<!--            p-id="12142"></path>-->
<!--        </svg>-->
<!--      </div>-->
<!--      <span>/</span>-->
<!--      <span>{{title}}</span>-->
<!--      <div >-->

<!--        <el-dropdown @command="handleCommand">-->

<!--                    <span class="el-dropdown-link">-->
<!--                        <img src="../assets/g.png" style="margin-top: 7px;margin-right: 9px;height: 25px;vertical-align: top;border-radius: 50%;">-->
<!--                        {USERNAME}-->
<!--                    </span>-->
<!--          <el-dropdown-menu slot="dropdown" >-->
<!--            <el-dropdown-item  icon="el-icon-s-custom"  command="4">个人信息</el-dropdown-item>-->
<!--            <el-dropdown-item  icon="el-icon-circle-close" command="5" >退出登录</el-dropdown-item>-->
<!--          </el-dropdown-menu>-->
<!--        </el-dropdown>-->
<!--      </div>-->
<!--    </div>-->

  </div>
</template>

<script>
export default {
  name:"HomeSideBar",
  data() {
    return {
      isCollapse: true,
      title:"title",
      list:[],

    };
  },
  // props:{
  //   userdetail:{},
  //   studentdetail:{}
  // },
  // methods: {
  //   forIsCollapse(){
  //     this.isCollapse = !this.isCollapse;
  //     this.$emit('isCollapse', this.isCollapse);
  //   },
  //   handleOpen(key, keyPath) {
  //     // console.log(key, keyPath);
  //   },
  //   handleClose(key, keyPath) {
  //     // console.log(key, keyPath);
  //   },
  //   handleCommand(command) {
  //     // this.to(parseInt(command));
  //     switch (command){
  //       case "4":
  //         this.$router.push("/Information");   //跳转个人信息页
  //         break;
  //       case "5":
  //         localStorage.removeItem('userInfo'); //清除登录用户信息
  //         this.$router.push("/");             //返回登录
  //         break;
  //     }
  //   },
  //   to(index){
  //     switch (index){
  //       case 1 :
  //         this.$router.push("/ArriveMange");
  //         this.title = "报道信息"
  //         if(!this.list.includes("报道信息"))
  //           this.list.push("报道信息");
  //         break;
  //       case 2:
  //         this.$router.push("/BillMange");
  //         this.title="缴费信息";
  //         if (!this.list.includes("缴费信息"))
  //           this.list.push("缴费信息");
  //         break;
  //       case 3:
  //         this.$router.push("/DormitoryMange");
  //         this.title = "宿舍选取";
  //         if (!this.list.includes("宿舍选取"))
  //           this.list.push("宿舍选取");
  //         break;
  //       case 4:
  //         this.$router.push("/Information");
  //         this.title = "个人信息";
  //         if (!this.list.includes("个人信息"))
  //           this.list.push("个人信息");
  //         break;
  //       case 5:
  //         this.$router.push("/");
  //         break;
  //     }
  //     // console.log("触发了");
  //     this.$emit("list", this.list);
  //   },
  //   to_manger(index) {
  //     switch (index) {
  //       case 1:
  //         this.$router.push("/ArriveInformation");
  //         this.title = "报道管理"
  //         if (!this.list.includes("报道管理"))
  //           this.list.push("报道管理");
  //         break;
  //       case 2:
  //         this.$router.push("/UserInformation");
  //         this.title = "用户管理";
  //         if (!this.list.includes("用户管理"))
  //           this.list.push("用户管理");
  //         break;
  //       case 3:
  //         this.$router.push("/DormitoryInformation");
  //         this.title = "宿舍管理";
  //         if (!this.list.includes("宿舍管理"))
  //           this.list.push("宿舍管理");
  //         break;
  //       case 4:
  //         this.$router.push("/StudentInformation");
  //         this.title = "学生管理";
  //         if (!this.list.includes("学生管理"))
  //           this.list.push("学生管理");
  //         break;
  //       case 5:
  //         this.$router.push("/");
  //         break;
  //       case 6:
  //         this.$router.push("/SumInformation");
  //         this.title = "数据概况";
  //         if (!this.list.includes("数据概况"))
  //           this.list.push("数据概况");
  //         break;
  //       case 7:
  //         this.$router.push("/ArriveListInformation");
  //         this.title = "报道流程";
  //         if (!this.list.includes("报道流程"))
  //           this.list.push("报道流程");
  //         break;
  //
  //     }
  //     this.$emit("list", this.list);
  //   },
  // },
  // mounted(){
  //   //学生端
  //   if(this.userdetail.role==0){
  //     // console.log(0);
  //     this.title = "报道信息";
  //     this.list.push("报道信息");
  //   }else{
  //     // console.log(1);
  //     this.title = "报道管理";
  //     this.list.push("报道管理");
  //   }
  //   this.$emit("list", this.list);
  // }
}
</script>


<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
body {
  margin: 0px;
  padding: 0px;
}
.top{
  text-align: initial;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #ffffff;
  border-bottom: 0.7px solid rgba(0, 0, 0, .2);
}

.top>span:first-of-type{
  margin-left: 11px;
  color: #999999;
}
.top>span:last-of-type{
  margin-left: 11px;
  color: #999999;
}
.top>div:last-of-type{
  height: 100%;
  float: right;
  width: 100px;
  text-align: center;
}
.top>div:last-of-type:hover {
  background: #EBEEF5;
}

#sidebar{

  float: left;
  margin-right: 10px;
}
</style>



